<template>
  <view class="page">
    <Header></Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-课堂作业-·学习数据报告'"> </Breadcrumb>
        <view class="content">
          <view class="title"> 课堂作业·{{ typeName }}·学习数据报告 </view>
          <view class="subtitle">
            <text>{{ classworkName }}</text>
            <text>布置时间：{{ createTime }}</text>
            <text>完成时间：{{ finishTime }}</text>
          </view>
          <template v-if="type === '1'">
            <view class="box1">
              <view class="table">
                <u-table
                  font-size="24"
                  color="#4e4c4c"
                  padding="20rpx 0"
                  border-color="#5389e2"
                  bg-color="#f5f3f"
                >
                  <u-tr>
                    <u-th width="20%">单词</u-th>
                    <u-th width="20%">释义</u-th>
                    <u-th width="20%">音标</u-th>
                    <u-th width="10%">训练次数</u-th>
                    <u-th width="15%">最低分</u-th>
                    <u-th width="15%">最高分</u-th>
                  </u-tr>
                  <u-tr v-for="(item, index) in reportList" :key="index">
                    <u-td width="20%">{{ item.word.word }}</u-td>
                    <u-td width="20%">{{ item.word.wordParaphrase }}</u-td>
                    <u-td width="20%">{{ item.word.wordSoundmark }}</u-td>
                    <u-td width="10%">{{ item.learnNum }}</u-td>
                    <u-td width="15%">{{ item.lowScore }}</u-td>
                    <u-td width="15%">{{ item.highScore }}</u-td>
                  </u-tr>
                </u-table>
              </view>
            </view>
          </template>
          <template v-if="type === '2'">
            <view class="box1">
              <view class="table">
                <u-table
                  font-size="24"
                  color="#4e4c4c"
                  padding="20rpx 0"
                  border-color="#5389e2"
                  bg-color="#f5f3f"
                >
                  <u-tr>
                    <u-th>单词</u-th>
                    <u-th>释义</u-th>
                    <u-th>音标</u-th>
                    <u-th>熟练程度</u-th>
                  </u-tr>
                  <u-tr v-for="(item, index) in reportList" :key="index">
                    <u-td>{{ item.word.word }}</u-td>
                    <u-td>{{ item.word.wordParaphrase }}</u-td>
                    <u-td>{{ item.word.wordSoundmark }}</u-td>
                    <u-td>{{ item.skillLevel }}</u-td>
                  </u-tr>
                </u-table>
              </view>
            </view>
          </template>
          <template v-if="type === '3'">
            <view class="box1">
              <view class="table">
                <u-table
                  font-size="24"
                  color="#4e4c4c"
                  padding="20rpx 0"
                  border-color="#5389e2"
                  bg-color="#f5f3f"
                >
                  <u-tr>
                    <u-th>单词</u-th>
                    <u-th>释义</u-th>
                    <u-th>音标</u-th>
                    <u-th>熟练程度</u-th>
                  </u-tr>
                  <u-tr v-for="(item, index) in reportList" :key="index">
                    <u-td>{{ item.word.word }}</u-td>
                    <u-td>{{ item.word.wordParaphrase }}</u-td>
                    <u-td>{{ item.word.wordSoundmark }}</u-td>
                    <u-td>{{ item.skillLevel }}</u-td>
                  </u-tr>
                </u-table>
              </view>
            </view>
          </template>
          <template v-if="type === '4'">
            <view class="tips">
              <view class="tips_text">学后测：{{ afterScore }}</view>
              <view class="tips_text">获得金币数：{{ goldNum }}</view>
            </view>
            <view class="box2">
              <view class="table">
                <u-table font-size="24" color="#606266" padding="20rpx 0">
                  <u-tr>
                    <u-th width="35%">英文句子</u-th>
                    <u-th width="35%">中文释义</u-th>
                    <u-th width="10%">听译次数</u-th>
                    <u-th width="10%">正确次数</u-th>
                    <u-th width="10%">错误次数</u-th>
                  </u-tr>
                  <u-tr v-for="(item, index) in reportList" :key="index">
                    <u-td width="35%">{{ item.englishSentence }}</u-td>
                    <u-td width="35%">{{ item.chineseMeaning }}</u-td>
                    <u-td width="10%">{{ item.sumCount }}</u-td>
                    <u-td width="10%">{{ item.correctCount }}</u-td>
                    <u-td width="10%">{{ item.wrongCount }}</u-td>
                  </u-tr>
                </u-table>
              </view>
            </view>
          </template>
          <template v-if="type === '5'">
            <view class="box1">
              <view class="table">
                <u-table
                  font-size="24"
                  color="#4e4c4c"
                  padding="20rpx 0"
                  border-color="#5389e2"
                  bg-color="#f5f3f"
                >
                  <u-tr>
                    <u-th width="30%">英文句子</u-th>
                    <u-th width="30%">中文释义</u-th>
                    <u-th width="10%">训练次数</u-th>
                    <u-th width="30%">需要提升的内容</u-th>
                  </u-tr>
                  <u-tr v-for="(item, index) in reportList" :key="index">
                    <u-td width="30%">{{ item.sentence }}</u-td>
                    <u-td width="30%">{{ item.chinese }}</u-td>
                    <u-td width="10%">{{ item.learnNum }}</u-td>
                    <u-td width="30%">{{
                      item.improveContent ||
                      "这段话读的很完美呢！没有需要提升的内容。"
                    }}</u-td>
                  </u-tr>
                </u-table>
              </view>
            </view>
          </template>
          <template v-if="type === '6'">
            <view class="tips">
              <view class="tips_text">学后测：{{ afterScore }}</view>
              <view class="tips_text">获得金币数：{{ goldNum }}</view>
            </view>
            <view class="box2">
              <view class="table">
                <u-table
                  font-size="24"
                  color="#4e4c4c"
                  padding="20rpx 0"
                  border-color="#5389e2"
                  bg-color="#f5f3f"
                >
                  <u-tr>
                    <u-th width="35%">英文句子</u-th>
                    <u-th width="35%">中文释义</u-th>
                    <u-th width="10%">汉译次数</u-th>
                    <u-th width="10%">正确次数</u-th>
                    <u-th width="10%">错误次数</u-th>
                  </u-tr>
                  <u-tr v-for="(item, index) in reportList" :key="index">
                    <u-td width="35%">{{ item.englishSentence }}</u-td>
                    <u-td width="35%">{{ item.chineseMeaning }}</u-td>
                    <u-td width="10%">{{ item.sumCount }}</u-td>
                    <u-td width="10%">{{ item.correctCount }}</u-td>
                    <u-td width="10%">{{ item.wrongCount }}</u-td>
                  </u-tr>
                </u-table>
              </view>
            </view>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  classworkReadReport,
  classworkChooseReport,
  classworkPassReport,
  classworkListeningReport,
  classworkSpokenReport,
} from "@/api/classWork";
export default {
  components: {},
  data() {
    return {
      type: "",
      chapterId: "",
      userName: "",
      classworkName: "",
      createTime: "",
      finishTime: "",
      goldNum: 0,
      reportList: [],
      reportPrintList: [],
      afterScore: 0,
    };
  },
  computed: {
    typeName() {
      let typeName = "";
      if (this.type === "1") {
        typeName = "单词领读";
      } else if (this.type === "2") {
        typeName = "单词速记";
      } else if (this.type === "3") {
        typeName = "单词闯关";
      } else if (this.type === "4") {
        typeName = "句子听选";
      } else if (this.type === "5") {
        typeName = "句子跟读";
      } else if (this.type === "6") {
        typeName = "句子拼写";
      }
      return typeName;
    },
  },
  onLoad(option) {
    this.type = option.type;
    this.chapterId = option.chapterId;
    this.init();
  },
  methods: {
    init() {
      if (this.type === "1") {
        this.getReadReport();
      } else if (this.type === "2") {
        this.getChooseReport();
      } else if (this.type === "3") {
        this.getPassReport();
      } else if (this.type === "4") {
        this.getHearingReport(1);
      } else if (this.type === "5") {
        this.getSpokenReport();
      } else if (this.type === "6") {
        this.getHearingReport(2);
      }
    },
    getReadReport() {
      let params = {
        id: this.chapterId,
      };
      classworkReadReport(params).then((res) => {
        let chapter = res.data.chapter;
        this.userName = chapter.username;
        this.classworkName = chapter.classworkName;
        this.createTime = chapter.createTime;
        this.finishTime = chapter.finishTime;
        this.goldNum = chapter.goldNum;
        this.reportList = res.data.list;
      });
    },
    getChooseReport() {
      let params = {
        id: this.chapterId,
      };
      classworkChooseReport(params).then((res) => {
        let chapter = res.data.chapter;
        this.userName = chapter.username;
        this.classworkName = chapter.classworkName;
        this.createTime = chapter.createTime;
        this.finishTime = chapter.finishTime;
        this.goldNum = chapter.goldNum;
        this.reportList = res.data.list;
      });
    },
    getPassReport() {
      let params = {
        id: this.chapterId,
      };
      classworkPassReport(params).then((res) => {
        let chapter = res.data.chapter;
        this.userName = chapter.username;
        this.classworkName = chapter.classworkName;
        this.createTime = chapter.createTime;
        this.finishTime = chapter.finishTime;
        this.goldNum = chapter.goldNum;
        this.reportList = res.data.list;
      });
    },
    getHearingReport(type) {
      let params = {
        chapterId: this.chapterId,
        type: type,
      };
      classworkListeningReport(params).then((res) => {
        let chapter = res.data.chapter;
        this.userName = chapter.username;
        this.classworkName = chapter.classworkName;
        this.createTime = chapter.createTime;
        this.finishTime = chapter.finishTime;
        this.goldNum = chapter.goldNum;
        this.afterScore = chapter.afterScore;
        this.reportList = res.data.list;
        this.reportPrintList = this.reportList;
      });
    },
    getSpokenReport() {
      let params = {
        id: this.chapterId,
      };
      classworkSpokenReport(params).then((res) => {
        let chapter = res.data.chapter;
        this.userName = chapter.username;
        this.classworkName = chapter.classworkName;
        this.createTime = chapter.createTime;
        this.finishTime = chapter.finishTime;
        this.goldNum = chapter.goldNum;
        this.reportList = res.data.list;
        this.reportPrintList = this.reportList;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./classWorkReport";
</style>
